import React from 'react'
import { Card, Button, Row, Col, Input,Upload, message, Form, Select, Radio , DatePicker, Space,Breadcrumb} from 'antd';
import '../../assets/style/addhuodong.css'
import { UploadOutlined } from '@ant-design/icons';

const { Option } = Select;
const { TextArea } = Input;
const { RangePicker } = DatePicker;
const props = {
  name: 'file',
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};

class youhui extends React.Component {
  render() {
    return(
      <div>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>活动管理</Breadcrumb.Item>
          <Breadcrumb.Item>添加活动</Breadcrumb.Item>
        </Breadcrumb>
          <Card title='新增活动信息'>
            {/*第一行title和按钮*/}
            <Row className={'firstline'}>
              <Col span={12} className={'titleText'}>基本信息</Col>
              <Col span={12} className={'rightcol'}>
              <Button type="primary" className={'btnbtn'} onClick={() => this.props.history.push("/home/huodonglist")}>确定</Button>
              <Button className={'btnbtn'} onClick={() => this.props.history.push("/home/huodonglist")}>取消</Button>
              </Col>
            </Row>
            {/*表单*/}
            <Form onFinish={this.addYouhui}>
              <Row span={24}>
                <Col span={12}>
                  <Form.Item name="act_createPerson" label="创建人" colon={true}>
                    <Row>
                      <Input placeholder="请填写活动创建人" style={{ width: 240 }}/>
                    </Row>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="cou_caption" label="活动时间">
                    <Row>
                      <Space direction="vertical" size={12} className={'alignarea'}>
                        <RangePicker />
                      </Space>
                    </Row>
                  </Form.Item>
                </Col>
                <Col span={5}>
                  <Form.Item name="act_img" label="活动头图" colon={true}>
                    <Row>
                      <Upload {...props}>
                        <Button icon={<UploadOutlined />}>Click to Upload</Button>
                      </Upload>
                    </Row>
                  </Form.Item>
                </Col>
                <Col span={19}>
                  <span className={'imgtxtarea'}>小于3M，图片需不小于360*640像素，不大于2048*2049像素，仅限JPG、PNG格式。</span>
                </Col>
                <Col span={12}>
                  <Form.Item name="act_name" label="活动名称" colon={true}>
                    <Row>
                      <Input placeholder="请填写活动名称" style={{ width: 240 }}/>
                    </Row>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="act_state" label="活动状态" colon={true}>
                    <Row>
                      <Radio.Group>
                        <Radio value={1}>
                          进行中
                        </Radio>
                        <Radio value={0}>
                          未开始
                        </Radio>
                      </Radio.Group>
                    </Row>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item name="cou_id" label="活动优惠券" colon={true}>
                    <Row>
                      <Select defaultValue="双十二满减券" style={{ width: 240 }}>
                        <Option value="1">双十二满减券</Option>
                        <Option value="0">双十二满减券1</Option>
                        <Option value="2">双十二满减券2</Option>
                        <Option value="3">双十二满减券3</Option>
                        <Option value="4">双十二满减券4</Option>
                      </Select>
                    </Row>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item name="act_role" label="活动规则" colon={true}>
                    <Row>
                      <TextArea showCount maxLength={500} placeholder="请填写活动规则" style={{ width: 480 }}/>
                    </Row>
                  </Form.Item>
                </Col>
              </Row>
              {/*第二行title*/}
              <Row className={'firstline'}>
                <Col span={24} className={'titleText'}>分享设置</Col>
              </Row>
              <Row span={24}>
                <Col span={12}>
                  <Form.Item name="act_share" label="是否允许用户分享" colon={true}>
                    <Row>
                      <Select defaultValue="是" style={{ width: 240 }}>
                        <Option value="1">是</Option>
                        <Option value="0">否</Option>
                      </Select>
                    </Row>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item name="act_shareTitle" label="分享标题">
                    <Row>
                      <Input placeholder="系统默认活动名称" style={{ width: 240 }} />
                    </Row>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item name="act_shareTxt" label="分享文案" colon={true}>
                    <Row>
                      <TextArea showCount maxLength={500} placeholder="请填写分享文案" style={{ width: 480 }}/>
                    </Row>
                  </Form.Item>
                </Col>
                <Col span={5}>
                  <Form.Item name="act_shareImg" label="分享图片" colon={true}>
                    <Row>
                      <Upload {...props}>
                        <Button icon={<UploadOutlined />}>Click to Upload</Button>
                      </Upload>
                    </Row>
                  </Form.Item>
                </Col>
                <Col span={19}>
                  <span className={'imgtxtarea'}>小于3M，图片需不小于360*640像素，不大于2048*2049像素，仅限JPG、PNG格式。</span>
                </Col>
              </Row>
            </Form>
          </Card>
        </div>
    )
  }
}

export {youhui as default}